<template>
  <div class="hello">
    <!-- header -->
      <mt-header fixed title="首页" id="header"></mt-header>
      <!--图片 -->
      <div id="image">
          <img src="../../../public/image/logo.jpg" alt="">
      </div>
      <!-- 数据  title   修改密码  消息通知-->
      <div class="data">
          <!-- <h4 class="dataTitle">数据明细</h4> -->
          <div class="txt"> 
              <span class="message" @click="forback">
                <img src="../../../public/image/forback.png" alt="">
              </span>
              <span class="password" @click="getPassword">
                <img src="../../../public/image/password.png" alt="">
              </span>
              <span class="message" @click="getMessage">
                <img src="../../../public/image/message.png" alt="">
              </span>
            
          </div>
      </div>
       <!-- navbar -->
      <mt-navbar class="tab" v-model="checked">
          <mt-tab-item id="runInfo">运行情况</mt-tab-item>
          <mt-tab-item id="textInfo">通知公告</mt-tab-item>
          <mt-tab-item id="workPlan">工作计划</mt-tab-item>
          <mt-tab-item id="workDone">任务实施</mt-tab-item>
      </mt-navbar>
      <mt-tab-container  v-model="checked" id="container_content">
        <mt-tab-container-item id="runInfo">
           <!-- 当前雷达运行情况 -->
          <div class="radar_info">
              <div class="radar_table">
                <!-- 广东省 -->
                  <el-table :data="list" border :row-key="getRowKeys" :expand-row-keys="expands"  max-height="300" id="table">
                      <el-table-column type="expand" width="30" >
                        <template>
                          <!-- 湛江 茂名 珠海 东莞等海事局-->
                          <el-table :data="list1" border id="tableList">
                            <el-table-column type="expand" width="30">
                              <!-- 桂山、山狗吼等雷达站 -->
                              <template slot-scope="scope">
                                <el-table :data="list2[scope.$index]" border id="zhanjiang">
                                    <el-table-column  label="" prop="node_name" width="150"></el-table-column>
                                    <el-table-column  label="" prop="problem" width="80"></el-table-column>
                                    <el-table-column label="" prop="">
                                      <template slot-scope="scope">
                                        <el-button type="primary"  size="mini" @click="watchReport(scope.row)">查看报告</el-button>
                                      </template>
                                    </el-table-column>
                                </el-table>
                              </template>
                            </el-table-column>
                            <el-table-column label="" prop="node_name" width="120"></el-table-column>
                            <el-table-column label="" prop="problem" width="80"></el-table-column>
                            <el-table-column label="" prop=""></el-table-column>
                          </el-table>
                        </template>
                      </el-table-column>
                      <!-- table header -->
                      <el-table-column label="站点名称" prop="node_name" width="150"></el-table-column>
                      <el-table-column label="设备状态" prop="problem" width="80"></el-table-column>
                      <el-table-column label="工作报告" prop=""></el-table-column>
                  </el-table>
              </div>
          </div>
          <!-- 点击打开巡检报告 -->
          <el-dialog :title="report" :visible.sync="dialogFormVisible1">
            <el-form :model="list3">
              <el-form-item label="服务报告编号" :label-width="formLabelWidth">
                <el-input v-model="list3.reportCode" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="巡检工程师" :label-width="formLabelWidth">
                <el-input v-model="list3.servicEngineer" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="巡检意见" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="list3.taskDescript" :rows="5"></el-input>
              </el-form-item>
              <el-form-item label="状态描述" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="list3.statusDescript" :rows="5"></el-input>
              </el-form-item>
              <el-form-item label="维护结果" :label-width="formLabelWidth">
                <el-input v-model="list3.jobResult" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" plain @click="dialogFormVisible1 = false">关闭</el-button>
            </div>
          </el-dialog>
        </mt-tab-container-item>
        <mt-tab-container-item id="textInfo">
            <!-- 通知公告 -->
          <div class="announce">
              <div class="content" v-for="(item,index) in info" :key="index">
                  <div class="contentTitle">
                    {{item.title}}
                      <div class="isPubilc">公开：{{item.isPublic}}</div>
                  </div>
                  <div class="content_c">{{item.content}}</div>
                  <div class="content_u">通知对象：{{item.user_id}}</div>
                  <div class="content_t">
                    <div class="content_time">{{format(item.createTime)}}</div>
                    <el-button icon="el-icon-download" @click="updown(item.fileurl)" v-show="hiddenInfo1[index]">下载</el-button>
                    <el-button type="danger"  icon="el-icon-delete" @click="deleteInformation(item.id)" v-show="hiddenInfo">删除</el-button>
                  </div>
              </div>
              <div class="dataLength"><i class="iconfont icon-jiufuqianbaoicon14"></i>第<span>{{page1}}</span>页，每次显示3条数据，当前显示共<span> {{info.length}} </span>条数据</div>
              <div class="infoPage">
                <el-button type="primary"  size="medium" @click="prevPages()" class="prev" :disabled="isDisabled"><i class="iconfont el-icon-arrow-left"></i>上一页</el-button>
                <el-button type="primary"  size="medium" @click="nextPages()" class="next" :disabled="isDisabled1"><i class="iconfont el-icon-arrow-right"></i>下一页</el-button>
                <el-button type="success"  icon="el-icon-plus" @click="addInformation" v-show="hiddenInfo">添加公告</el-button>
              </div>
          </div>
          <!-- 点击添加公告，弹出框 -->
          <el-dialog title="新增通知公告" :visible.sync="dialogFormVisible2">
            <el-form :model="information">
              <el-form-item label="人员" :label-width="formLabelWidth">
                <el-select v-model="infoSelect" placeholder="请选择" multiple @change="getPersonName" style="width:100%">
                    <!-- 多选，选中的结果是一个数组 -->
                    <el-option v-for="(item,index) in information.persons" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="information.title" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="公开" :label-width="formLabelWidth">
                  <el-radio v-model="information.isPublic" label="yes" @change="getYes">是</el-radio>
                  <el-radio v-model="information.isPublic" label="no"  @change="getYes">否</el-radio>
              </el-form-item>
              <el-form-item label="内容" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="information.content" :rows="4"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary"  @click="saveInformation">保存</el-button>
              <el-button type="primary"  @click="dialogFormVisible2 = false">关闭</el-button>
            </div>
          </el-dialog>
        </mt-tab-container-item>
        <mt-tab-container-item id="workPlan">
            <!-- 任务清单列表 -->
          <div class="task">
            <div class="taskDo">
                <div class="query">
                    <el-form ref="form" :model="form" size="mini">
                        <el-form-item>           
                            <el-input v-model="form.dateSearch" placeholder="请输入查询日期如2018-07" style="width:70%" >
                                <el-button slot="append" icon="el-icon-search" @click="maintainPlan"></el-button>
                            </el-input>        
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="text"></div>
            <div class="collapse" v-if="taskList.length !== 0">
              <el-collapse :data="taskList" v-for="(item,index) in taskList" :key="index">
                <el-collapse-item :title="item.marine_board+'----'+item.radar_station" :name="index">
                  <div><span class="act"><i class="iconfont icon-xiangmuleixing"></i>任务类型：</span><span>{{item.task_type}}</span></div>
                  <div><span class="act"><i class="iconfont icon-leida"></i>雷达站：</span><span>{{item.radar_station}}</span></div>
                  <div><span class="act"><i class="iconfont icon-xiangmu"></i>重点巡检/维护项目 ：</span><span>{{item.task_content}}</span></div>
                  <!-- <div><span class="act"><i class="iconfont icon-shijian"></i>计划实施时间：</span><span>{{format(item.plandate)}}</span></div> -->
                  <div><span class="act"><i class="iconfont icon-shijian"></i>时间：</span><span>{{format(item.createtime)}}</span></div>
                  <div><el-button type="danger" plain icon="el-icon-delete" @click="delect(index)">删除</el-button></div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div class="dataLength"><i class="iconfont icon-jiufuqianbaoicon14"></i>第<span>{{page2}}</span>页，每次显示5条数据，当前显示共<span> {{taskList.length}} </span>条数据</div>
            <div class="page">
                <el-button type="primary"  size="medium" @click="prevPage()" class="prev" :disabled="isDisabled2"><i class="iconfont el-icon-arrow-left"></i>上一页</el-button>
                <el-button type="primary"  size="medium" @click="nextPage()" class="next" :disabled="isDisabled3"><i class="iconfont el-icon-arrow-right"></i>下一页</el-button>
                <el-button type="success"  size="medium" @click="addPlan()" class="next"><i class="iconfont el-icon-plus"></i>添加计划</el-button> 
            </div>
          
          </div>
          <!-- 添加计划弹窗 -->
          <el-dialog title="新增VTS维护计划" :visible.sync="dialogFormVisible3" class="elDialog">
            <el-form>
              <el-form-item label="海事局" :label-width="formLabelWidth">
                  <el-select v-model='select' @change="selectItem">
                    <el-option  v-for="(item,index) in addData.marineBoard" :key="index" :label="item.orgName" :value="item.orgName"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="雷达站" :label-width="formLabelWidth">
                  <el-select v-model="select1">
                    <el-option v-for="(item,index) in addData.radarList" :key="index" :label="item.orgName" :value="item.orgName"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="服务方式" :label-width="formLabelWidth">
                <el-input v-model="addData.serviceWay" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="计划日期" :label-width="formLabelWidth">
                <el-date-picker type="date" placeholder="选择日期" v-model="addData.planDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="重点巡检/维护项目" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="addData.content"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" plain @click="saveInfo">保存</el-button>
              <el-button type="primary" plain @click="dialogFormVisible3 = false">关闭</el-button>
            </div>
          </el-dialog>
        </mt-tab-container-item>
        <mt-tab-container-item id="workDone">
            <!--任务实施列表  -->
          <div class="task">
              <el-collapse :data="workData" v-for="(item,index) in workData" :key="index">
                <el-collapse-item :title="item.marineBoardCodeText+'----'+item.taskSn+'(任务序列号)'" name="index">
                  <div><span class="act"><i class="iconfont icon-leida"></i>雷达站：</span><span>{{item.implementDestText}}</span></div>
                  <div><span class="act"><i class="iconfont icon-xiangmuleixing"></i>任务名称：</span><span>{{item.taskName}}</span></div>
                  <div><span class="act"><i class="iconfont icon-xiangmuleixing"></i>任务内容：</span><span>{{item.taskContent}}</span></div>
                  <div><span class="act"><i class="iconfont icon-xiangmuleixing"></i>任务状态：</span><span>{{item.taskStatusText}}</span></div>
                  <div><span class="act"><i class="iconfont icon-xiangmuleixing"></i>审核状态: </span><span>{{item.auditStatusText}}</span></div>
                  <div><span class="act"><i class="iconfont icon-xiangmuleixing"></i>任务序列号: </span><span>{{item.taskSn}}</span></div>
                </el-collapse-item>
              </el-collapse>
              <div class="dataLength"><i class="iconfont icon-jiufuqianbaoicon14"></i>第<span>{{page3}}</span>页，每次显示10条数据，当前显示共<span> {{workData.length}} </span>条数据</div>
              <div class="page">
                <el-button type="primary"  size="medium" @click="prev" class="prev" :disabled="isDisabled4"><i class="iconfont el-icon-arrow-left"></i>上一页</el-button>
                <el-button type="primary"  size="medium" @click="next2" class="next" :disabled="isDisabled5"><i class="iconfont el-icon-arrow-right"></i>下一页</el-button>
              </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
     
     
  </div>
</template>

<script>
  	import index from './js/index.js';
	  export default index
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    @import "./scss/index.scss";
</style>
